<template>
  <d2-container>
    <div class="flex-1 ml-1 mt-1">
      <div class="flex-1 mb-2 row-ac">
        <div class="flex-1 report-box mr-1">
          <div class="py-1 ml-1 font-s-1 font-w">佣金总额</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w"><span class="font-s-1">￥</span>{{ disStats.total_increase_amount }}</div>
            <div class="font-s-1 text-light-grey">累计佣金总额</div>
          </div>
        </div>
        <div class="flex-1 report-box mr-1">
          <div class="py-1 ml-1 font-s-1 font-w">提现总额</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w"><span class="font-s-1">￥</span>{{ disStats.total_decrease_amount }}</div>
            <div class="font-s-1 text-light-grey">累计提现总额</div>
          </div>
        </div>
        <div class="flex-1 report-box mr-1">
          <div class="py-1 ml-1 font-s-1 font-w">本月佣金</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w"><span class="font-s-1">￥</span>{{ disStats.current_month_increase_amount }}</div>
            <div class="font-s-1 text-light-grey">当月佣金总额</div>
          </div>
        </div>
        <div class="flex-1 report-box mr-1">
          <div class="py-1 ml-1 font-s-1 font-w">本月提现</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w"><span class="font-s-1">￥</span>{{ disStats.current_month_decrease_amount }}</div>
            <div class="font-s-1 text-light-grey">当月提现总额</div>
          </div>
        </div>
        <div class="flex-1 report-box mr-1">
          <div class="py-1 ml-1 font-s-1 font-w">冻结金额</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w text-warning"><span class="font-s-1">￥</span>{{ disStats.total_frozen_amount }}</div>
            <div class="font-s-1 text-light-grey">当月提现总额</div>
          </div>
        </div>
        <div class="flex-1 report-box">
          <div class="py-1 ml-1 font-s-1 font-w">提现中</div>
          <div class="flex-1 row-a-j-fc pt">
            <div class="font-s-5 font-w text-danger"><span class="font-s-1">￥</span>{{ disStats.total_withdrawal_amount }}</div>
            <div class="font-s-1 text-light-grey">提现中金额</div>
          </div>
        </div>
      </div>
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">按用户查询</div>
          <div>
            <el-select size="small" v-model="queryInfo.user_id" clearable filterable remote :remote-method="searchUser"
              placeholder="用户名/手机号/别名">
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>
      <div class="mt-2">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部列表" name="first">
            <el-table :data="distributiondataList" stripe style="width: 100%;">
              <el-table-column align="center" label="序号" type="index" width="65" />
              <el-table-column align="center" label="用户" prop="user_name" width="80" />
              <el-table-column align="center" label="金额" prop="amount" width="80">
                <template slot-scope="scope">
                  <div style="color: #67c23a;" v-if="scope.row.types == 0">+ {{ scope.row.amount }}</div>
                  <div style="color: #f56c6c;" v-if="scope.row.types == 1">- {{ scope.row.amount }}</div>
                  <div style="color: #e6a23c;" v-if="scope.row.types == 2">+ {{ scope.row.amount }}</div>
                  <div style="color: #e6a23c;" v-if="scope.row.types == 3">- {{ scope.row.amount }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单号" prop="order_number" width="130" />
              <el-table-column align="center" label="订单用户" prop="order_user_name" width="80" />
              <el-table-column align="center" label="增加/提现" prop="types" width="80">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.types == 0" size="mini" type="success" effect="dark">增加</el-tag>
                  <el-tag v-if="scope.row.types == 1" size="mini" type="danger" effect="dark">提现</el-tag>
                  <el-tag v-if="scope.row.types == 2" size="mini" type="warning" effect="dark">冻结</el-tag>
                  <el-tag v-if="scope.row.types == 3" size="mini" type="warning" effect="dark">提现中</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单时间" prop="create_time" width="80" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="收入" name="increase">
            <el-table :data="distributiondataList" stripe style="width: 100%;">
              <el-table-column align="center" label="序号" type="index" width="65" />
              <el-table-column align="center" label="用户" prop="user_name" width="80" />
              <el-table-column align="center" label="金额" prop="amount" width="80">
                <template slot-scope="scope">
                  <div style="color: #67c23a;">+ {{ scope.row.amount }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单号" prop="order_number" width="130" />
              <el-table-column align="center" label="订单用户" prop="order_user_name" width="80" />
              <el-table-column align="center" label="增加/提现" prop="types" width="80">
                <template slot-scope="scope">
                  <el-tag size="mini" type="success" effect="dark">增加</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单时间" prop="create_time" width="80" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="提现列表" name="withdrawal">
            <el-table :data="distributiondataList" stripe style="width: 100%;">
              <el-table-column align="center" label="序号" type="index" width="65" />
              <el-table-column align="center" label="用户" prop="user_name" width="80" />
              <el-table-column align="center" label="金额" prop="amount" width="80">
                <template slot-scope="scope">
                  <div style="color: #f56c6c;">- {{ scope.row.amount }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单号" prop="order_number" width="130" />
              <el-table-column align="center" label="订单用户" prop="order_user_name" width="80" />
              <el-table-column align="center" label="增加/提现" prop="types" width="80">
                <template slot-scope="scope">
                  <el-tag size="mini" type="danger" effect="dark">提现</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单时间" prop="create_time" width="80" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="冻结" name="freeze">
            <el-table :data="distributiondataList" stripe style="width: 100%;">
              <el-table-column align="center" label="序号" type="index" width="65" />
              <el-table-column align="center" label="用户" prop="user_name" width="80" />
              <el-table-column align="center" label="金额" prop="amount" width="80">
                <template slot-scope="scope">
                  <div style="color: #e6a23c;">+ {{ scope.row.amount }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="订单号" prop="order_number" width="130" />
              <el-table-column align="center" label="订单用户" prop="order_user_name" width="80" />
              <el-table-column align="center" label="增加/提现" prop="types" width="80">
                <template slot-scope="scope">
                  <el-tag size="mini" type="warning" effect="dark">冻结</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="提现中" name="withdrawing">
            <el-table :data="distributiondataList" stripe style="width: 100%;">
              <el-table-column align="center" label="序号" type="index" width="65" />
              <el-table-column align="center" label="用户" prop="user_name" width="80" />
              <el-table-column align="center" label="金额" prop="amount" width="80">
                <template slot-scope="scope">
                  <div style="color: #e6a23c;">- {{ scope.row.amount }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="增加/提现" prop="types" width="80">
                <template slot-scope="scope">
                  <el-tag size="mini" type="warning" effect="dark">提现中</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="申请时间" prop="apply_time" width="80" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="distributiondataTotal">
        </el-pagination>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    distributiondataListUrl,
    adminuserListUrl,
    distributionstatsUrl
  } from '@/utils/distribution'
  export default {
    data() {
      return {
        queryInfo: {
          types: '',
          user_id: '',
          page: 1,
          page_size: 10
        },
        activeName: 'first',
        queryInfoUser: {
          search: ''
        },
        userList: [],
        distributiondataList: [],
        distributiondataTotal: 1,
        disStats: ''
      }
    },
    created() {
      this.getDistributiondataList()
      this.getUserList()
      this.getDistributionstats()
    },
    methods: {
      handleClick(tab, event) {
        if (tab.paneName == 'first') {
          this.queryInfo.types = ''
        } else if (tab.paneName == 'increase') {
          this.queryInfo.types = 0
        } else if (tab.paneName == 'withdrawal') {
          this.queryInfo.types = 1
        } else if (tab.paneName == 'freeze') {
          this.queryInfo.types = 2
        } else if (tab.paneName == 'withdrawing') {
          this.queryInfo.types = 3
        }
        this.getDistributiondataList()
      },
      searchUser(query) {
        this.getUserList(query)
      },
      getUserList(query) {
        this.queryInfoUser.search = query;
        this.$get(adminuserListUrl, this.queryInfoUser).then(res => {
          this.userList = res.data.data.list
        })
      },
      getDistributionstats() {
        this.$get(distributionstatsUrl).then(res => {
          this.disStats = res.data
          console.log(this.disStats);
        })
      },
      getDistributiondataList() {
        this.$get(distributiondataListUrl, this.queryInfo).then(res => {
          this.distributiondataList = res.data.data.list
          this.distributiondataTotal = res.data.data.total
          console.log(this.distributiondataList);
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getDistributiondataList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getDistributiondataList()
      },
      clickQuery() {
        this.getDistributiondataList()
      }
    }
  }
</script>

<style lang="scss">
  .report-box {
    height: 120px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>
